<template>
	<el-card shadow="hover">
		<el-row :gutter="10" class="top-block mb8">
			<el-col :span="1.5" v-if="queryParams.status == 1">
				<el-button @click="onApplyAudit" :disabled="single" type="primary" plain icon="el-icon-edit"> 审核 </el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button @click="onViewDetails" :disabled="single" type="info" plain icon="el-icon-view"> 查看明细 </el-button>
			</el-col>
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
		</el-row>
		<el-tabs type="border-card" @tab-click="getList" v-model="queryParams.status">
			<el-tab-pane label="待审核" name="1" />
			<el-tab-pane label="审核通过" name="2" />
			<el-tab-pane label="审核拒绝" name="3" />
		</el-tabs>
		<el-tabs v-if="queryParams.status == 2" @tab-click="getList" v-model="queryParams.payment_status">
			<el-tab-pane label="打款中" name="1" />
			<el-tab-pane label="打款成功" name="2" />
			<el-tab-pane label="打款失败" name="3" />
		</el-tabs>
		<el-table :data="tableList" v-loading="loading" @selection-change="onSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="提现单编号" align="center" prop="withdrawal_no" />
			<el-table-column label="供应商名称" align="center" prop="supplier_title" />
			<el-table-column label="结算订单数" align="center" prop="finish_order_num" />
			<el-table-column label="提现货款总额(￥)" align="center" prop="money" />
			<el-table-column label="手续费(￥)" align="center" prop="procedure_money" />
			<el-table-column label="实际到账金额(￥)" align="center" prop="remit_amount" />
			<el-table-column v-if="Number(queryParams.payment_status) > 1" label="结算单号" align="center" prop="mch_settle_no" />
			<el-table-column label="申请提现时间" align="center">
				<template #default="scope">{{ timeDictionary(scope.row.create_time) }}</template>
			</el-table-column>
			<el-table-column v-if="queryParams.payment_status == 2" label="银行账号" align="center" prop="account_number" />
			<el-table-column v-if="queryParams.status == 2" label="打款状态" align="center">
				<template #default="scope">{{ paymentStatusText(scope.row.payment_status) }}</template>
			</el-table-column>
			<el-table-column v-if="queryParams.status == 2" label="申请通过时间" align="center">
				<template #default="scope">{{ timeDictionary(scope.row.examine_time) }}</template>
			</el-table-column>
			<el-table-column v-if="queryParams.payment_status == 3" label="打款失败原因" align="center">
				<template #default="scope">
					<el-tooltip v-if="scope.row.payment_fail_reason" effect="light" :content="scope.row.payment_fail_reason" placement="top">
						<el-button>查看</el-button>
					</el-tooltip>
					<span v-else>----</span>
				</template>
			</el-table-column>
			<el-table-column v-if="queryParams.status == 3" label="申请拒绝时间" align="center">
				<template #default="scope">{{ timeDictionary(scope.row.examine_time) }}</template>
			</el-table-column>
			<el-table-column v-if="queryParams.status == 3" label="拒绝原因" align="center">
				<template #default="scope">
					<el-tooltip v-if="scope.row.fail_reason" effect="light" :content="scope.row.fail_reason" placement="top">
						<el-button>查看</el-button>
					</el-tooltip>
					<span v-else>----</span>
				</template>
			</el-table-column>
		</el-table>
		<pagination-component
			v-show="total > 0"
			:total="total"
			v-model:page="queryParams.pageNum"
			v-model:limit="queryParams.pageSize"
			@pagination="getList"
		/>
		<withdrawal-audit-dialog ref="withdrawalAuditRef" />
		<payment-goods-detail-dialog ref="paymentGoodsDetailRef" />
	</el-card>
</template>

<script lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';
import { withdrawalList } from '/@/api/admin1';
import { paymentStatusText, timeDictionary } from '/@/utils/dictionaryTranslation';

import WithdrawalAuditDialog from './dialog/WithdrawalAuditDialog.vue';
import PaymentGoodsDetailDialog from './dialog/PaymentGoodsDetailDialog.vue';

export default {
	name: 'financialPaymentGoodsAudit',
	components: { WithdrawalAuditDialog, PaymentGoodsDetailDialog },
	setup() {
		const state = reactive({
			queryParams: {
				status: '1',
				payment_status: '1',
				pageNum: 1,
				pageSize: 10,
			},
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 选中数组
			ids: [],
			showSearch: true,
			tableList: [],
			loading: false,
			total: 20,
		});

		const withdrawalAuditRef = ref(null);
		const paymentGoodsDetailRef = ref(null);

		// 被选择的数据项
		let selectionInfo: Array<any> = [];

		onMounted(() => {
			getList();
		});
		/********** 点击事件(on开头) **********/
		// 审核提现
		const onApplyAudit = () => {
			(withdrawalAuditRef.value as any)?.openDialog({ withdrawal_id: selectionInfo[0].id }, () => getList());
		};
		// 查看明细
		const onViewDetails = () => {
			(paymentGoodsDetailRef.value as any)?.openDialog({ withdrawal_no: selectionInfo[0].withdrawal_no }, () => getList());
		};
		// 多选框选中数据
		const onSelectionChange = (selection: any) => {
			selectionInfo = selection;
			state.single = selection.length !== 1;
			state.multiple = !selection.length;
		};

		/********** 方法事件 **********/
		const getList = () => {
			console.log('刷新');
			_withdrawalList({
				...state.queryParams,
				payment_status: Number(state.queryParams.status) == 2 ? state.queryParams.payment_status : '',
			});
		};

		/********** 网络事件 **********/
		// 货款列表
		const _withdrawalList = (_data: object) => {
			withdrawalList(_data)
				.then((res: any) => {
					console.log('货款列表', res);
					state.tableList = res.data.list;
					state.total = res.data.total;
					state.loading = false;
				})
				.catch(() => {
					state.loading = false;
				});
		};

		return {
			withdrawalAuditRef,
			paymentGoodsDetailRef,
			onSelectionChange,
			onApplyAudit,
			onViewDetails,
			getList,
			timeDictionary,
			paymentStatusText,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
